import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'

<Meta title='Design Systems' />

# Colors: Essential

<Preview>
  <Story name="Colors: Essential">
  {{
      components: {},
      template: `
      <div class="row">
        <div class="col span-2">
          <div class="swatch-dot" style="background: var(--body-text);"></div>
          <h3>Primary Text</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot" style="background: var(--secondary);"></div>
          <h3>Secondary Text</h3> 
          <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot" style="background: var(--link-text);"></div>
          <h3>Interactive Text</h3>
          <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col span-2">
          <div class="swatch-dot" style="background: var(--muted);"></div>
          <h3>Disabled Text</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>`
    }}
  </Story>
</Preview>
